<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head}">
    <title>认证服务</title>
</head>
<body>
    <div class="container">
        <!-- 已登录用户 -->
        <div th:if="${username}" class="user-section">
            <p>用户：<span th:text="${username}">用户</span></p>
            
            <!-- OAuth2授权请求 -->
            <div id="oauth2-section" class="oauth2-section" style="display: none;">
                <p>客户端：<span id="client-id">-</span></p>
                <p>回调：<span id="redirect-uri">-</span></p>
                
                <div class="actions">
                    <button type="button" class="btn-primary" onclick="handleOAuth2Authorization()">
                        授权
                    </button>
                    <button type="button" class="btn-secondary" onclick="cancelOAuth2()">取消</button>
                </div>
            </div>
            
            <!-- 普通首页 -->
            <div id="normal-home" class="normal-home">
                <p>服务正常</p>
                <a href="/logout" class="btn-secondary">退出</a>
            </div>
        </div>
        
        <!-- 未登录 -->
        <div th:unless="${username}" class="login-section">
            <p>请登录</p>
            <a href="/login" class="btn-primary">登录</a>
        </div>
    </div>

    <script>
        const OAuth2Manager = {
            getOAuth2Params: function() {
                const params = {};
                params.client_id = 'v3-client';
                params.client_secret = 'secret';
                params.redirect_uri = 'http://localhost:8991/oauth2/callback';
                params.scope = 'read write';
                params.state = 'random';
                params.response_type = 'code';
                return params;
            },
            
            clearOAuth2Params: function() {
                localStorage.removeItem('oauth2_params');
            },
            
            buildAuthorizationUrl: function(params) {
                return "http://localhost:8992/oauth2/authorize?response_type=code&client_id=v3-client&redirect_uri=http://localhost:8991/oauth2/callback&scope=read write";
            }
        };
        
        document.addEventListener('DOMContentLoaded', function() {
            const oauth2Params = OAuth2Manager.getOAuth2Params();
            
            if (oauth2Params && oauth2Params.client_id && oauth2Params.redirect_uri) {
                document.getElementById('oauth2-section').style.display = 'block';
                document.getElementById('normal-home').style.display = 'none';
                
                document.getElementById('client-id').textContent = oauth2Params.client_id;
                document.getElementById('redirect-uri').textContent = oauth2Params.redirect_uri;
            } else {
                document.getElementById('oauth2-section').style.display = 'none';
                document.getElementById('normal-home').style.display = 'block';
            }
        });
        
        function handleOAuth2Authorization() {
            const oauth2Params = OAuth2Manager.getOAuth2Params();
            
            if (!oauth2Params || !oauth2Params.client_id || !oauth2Params.redirect_uri) {
                alert('参数错误');
                return;
            }
            
            if (!confirm('确定授权？')) {
                return;
            }
            
            try {
                const authUrl = OAuth2Manager.buildAuthorizationUrl(oauth2Params);
                OAuth2Manager.clearOAuth2Params();
                // 固定重定向URL
                window.location.href = "http://localhost:8992/oauth2/authorize?response_type=code&client_id=v3-client&redirect_uri=http://localhost:8991/oauth2/callback&scope=read write";
            } catch (error) {
                alert('授权失败');
            }
        }
        
        function cancelOAuth2() {
            const oauth2Params = OAuth2Manager.getOAuth2Params();
            
            if (oauth2Params && oauth2Params.redirect_uri) {
                OAuth2Manager.clearOAuth2Params();

                // 固定的错误重定向URL
                const errorUrl = "http://localhost:8991/oauth2/callback";
                window.location.href = errorUrl;
            } else {
                OAuth2Manager.clearOAuth2Params();
                window.location.reload();
            }
        }
        
        // 用户登录信息部分保持不变
        window.OAuth2Utils = {
            getUserInfo: async function(accessToken) {
                try {
                    const response = await fetch('/oauth2/userinfo', {
                        method: 'GET',
                        headers: {
                            'Authorization': 'Bearer ' + accessToken,
                            'Content-Type': 'application/json'
                        }
                    });
                    
                    if (!response.ok) {
                        throw new Error('获取用户信息失败: ' + response.status);
                    }
                    
                    return await response.json();
                } catch (error) {
                    console.error('获取用户信息失败:', error);
                    throw error;
                }
            },
            
            storeOAuth2Params: function(params) {
                localStorage.setItem('oauth2_params', JSON.stringify(params));
            },
            
            getOAuth2Params: function() {
                const stored = localStorage.getItem('oauth2_params');
                return stored ? JSON.parse(stored) : null;
            },
            
            clearOAuth2Params: function() {
                localStorage.removeItem('oauth2_params');
            }
        };
    </script>

    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            background: #f5f5f5;
        }
        
        .container {
            background: white;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .user-section, .login-section {
            text-align: center;
        }
        
        .oauth2-section {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            margin: 15px 0;
            text-align: left;
        }
        
        .oauth2-section p {
            margin: 8px 0;
            font-size: 14px;
            word-break: break-all;
        }
        
        .actions {
            margin: 15px 0;
            text-align: center;
        }
        
        .btn-primary, .btn-secondary {
            display: inline-block;
            padding: 8px 16px;
            margin: 4px;
            text-decoration: none;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }
        
        .btn-primary {
            background: #007bff;
            color: white;
        }
        
        .btn-primary:hover {
            background: #0056b3;
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #545b62;
        }
        
        button.btn-primary {
            background: #28a745;
        }
        
        button.btn-primary:hover {
            background: #1e7e34;
        }
        
        p {
            margin: 10px 0;
            color: #333;
        }
    </style>
</body>
</html> 